<template>
    <div class="device-status">
        <div class="status-cards">
            <el-card class="status-card total" shadow="hover" @click="handleFilter('')">
                <div class="card-content">
                    <div class="card-value number-display">
                        <AnimatedNumber :duration="500" :value="deviceCount" :decimals="0" />
                    </div>
                    <div class="card-title">
                        {{ isShowOnline ? '设备总数' : '离线及异常' + '设备总数' }}
                    </div>
                </div>
            </el-card>
            <el-card v-if="isShowOnline" class="status-card online" shadow="hover" @click="handleFilter('online')">
                <div class="card-content">
                    <div class="card-value number-display">
                        <AnimatedNumber :duration="500" :value="onlineCount" :decimals="0" />
                    </div>
                    <div class="card-title">在线设备</div>
                </div>
            </el-card>
            <el-card class="status-card offline" shadow="hover" @click="handleFilter('offline')">
                <div class="card-content">
                    <div class="card-value number-display">
                        <AnimatedNumber :duration="500" :value="offlineCount" :decimals="0" />
                    </div>
                    <div class="card-title">离线设备</div>
                </div>
            </el-card>
            <el-card class="status-card error" shadow="hover" @click="handleFilter('error')">
                <div class="card-content">
                    <div class="card-value number-display">
                        <AnimatedNumber :duration="500" :value="errorCount" :decimals="0" />
                    </div>
                    <div class="card-title">异常设备</div>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
    deviceList: {
        type: Array,
        required: true,
        default: () => []
    },
    isShowOnline: {
        type: Boolean,
        default: true
    },
})

const emit = defineEmits(['filter-status'])

// 点击卡片处理函数
const handleFilter = (status) => {
    emit('filter-status', status)
}

// 根据新的数据结构调整计算逻辑
const deviceCount = computed(() => props.deviceList.length)
const onlineCount = computed(() => {
    return props.deviceList.filter(device => {
        return device.status === 'online'
    }).length
})

const offlineCount = computed(() => {
    return props.deviceList.filter(device => {
        return device.status === 'offline'
    }).length
})

const errorCount = computed(() => {
    return props.deviceList.filter(device => {
        return device.status === 'error'
    }).length
})
</script>

<style lang="scss" scoped>
.device-status {
    margin-bottom: var(--gap-normal);

    .status-cards {
        display: flex;
        justify-content: space-between;
        gap: var(--gap-normal);

        .status-card {
            flex: 1;
            transition: all 0.3s ease;
            cursor: pointer;
            /* 添加指针样式表明可点击 */

            &:hover {
                transform: translateY(-2px);
            }

            .card-content {
                padding: 16px;
                text-align: center;
            }

            .card-value {
                margin-bottom: var(--gap-small);
            }

            .card-title {
                font-size: var(--font-size-normal);
                color: var(--el-text-color-secondary);
            }
        }

        // 添加状态卡片的样式
        .total {
            .card-value {
                color: var(--el-color-primary);
            }
        }

        .online {
            .card-value {
                color: var(--el-color-success);
            }
        }

        .offline {
            .card-value {
                color: var(--el-color-info);
            }
        }

        .error {
            .card-value {
                color: var(--el-color-danger);
            }
        }
    }
}
</style>